<template>
	<view class="content">
		<view @tap="onPageTap('../user-info/user-info')" class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo" v-if="tableName=='yonghu'">
				<view class="info">
					<view class="account-box">
						<text class="account">{{user.zhanghao}}</text>
						<text v-if="user.vip && user.vip=='是'" class="vip-tag">(VIP)</text>
					</view>
					<view class="user-info-grid">
						<view class="info-item" v-if="user.nicheng">
							<text class="label">昵称：</text>
							<text class="value">{{user.nicheng}}</text>
						</view>
						<view class="info-item" v-if="user.xingbie">
							<text class="label">性别：</text>
							<text class="value">{{user.xingbie}}</text>
						</view>
						<view class="info-item" v-if="user.shouji">
							<text class="label">手机：</text>
							<text class="value">{{user.shouji}}</text>
						</view>
						<view class="info-item" v-if="user.youxiang">
							<text class="label">邮箱：</text>
							<text class="value">{{user.youxiang}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="setting">
				<view class="cuIcon-settings"></view>
			</view>
		</view>
		<view class="list">
			<template v-for="item in menuList">
				<template v-if="role==item.roleName">
					<template v-for="menu in item.backMenu">
						<template v-for="(child,sort) in menu.child">
							<view :key="sort" class="li" hover-class="hover" 
								v-if="child.tableName!='yifahuodingdan' && child.tableName!='yituikuandingdan' &&child.tableName!='yiquxiaodingdan' && child.tableName!='weizhifudingdan' && child.tableName!='yizhifudingdan' && child.tableName!='yiwanchengdingdan' && child.tableName!='chat'" 
								@tap="onPageTap('../'+child.tableName+'/list?userid='+user.id)">
								<view v-if="true" :class="child.appFrontIcon" class="icon"></view>
								<view class="text">{{child.menu}}</view>
							</view>
						</template>
					</template>
				</template>
			</template>
		</view>
	</view>
</template>
<script>
	import menu from '@/utils/menu'
	export default {
		data() {
			return {
				isH5Plus: true,
				user: {},
				tableName:'',
				role: '',
				menuList: [],
        iconArr: [
          'cuIcon-same',
          'cuIcon-deliver',
          'cuIcon-evaluate',
          'cuIcon-shop',
          'cuIcon-ticket',
          'cuIcon-cascades',
          'cuIcon-discover',
          'cuIcon-question',
          'cuIcon-pic',
          'cuIcon-filter',
          'cuIcon-footprint',
          'cuIcon-pulldown',
          'cuIcon-pullup',
          'cuIcon-moreandroid',
          'cuIcon-refund',
          'cuIcon-qrcode',
          'cuIcon-remind',
          'cuIcon-profile',
          'cuIcon-home',
          'cuIcon-message',
          'cuIcon-link',
          'cuIcon-lock',
          'cuIcon-unlock',
          'cuIcon-vip',
          'cuIcon-weibo',
          'cuIcon-activity',
          'cuIcon-friendadd',
          'cuIcon-friendfamous',
          'cuIcon-friend',
          'cuIcon-goods',
          'cuIcon-selection'
        ],
			};
		},
		computed: {
			baseUrl() {
				return this.$base.url;
			}
		},
		async onLoad(){
			this.role = uni.getStorageSync("role");
			let table = uni.getStorageSync("nowTable");
			let res = await this.$api.session(table);
			this.user = res.data;
			this.tableName = table;
			let menus = menu.list();
			this.menuList = menus;
		},
		async onShow(){
            uni.removeStorageSync("useridTag");
			this.role = uni.getStorageSync("role");
			let table = uni.getStorageSync("nowTable");
			let res = await this.$api.session(table);
			this.user = res.data;
			this.tableName = table;
			let menus = menu.list();
			this.menuList = menus;
		},
		methods: {
			onPageTap(url) {
                uni.setStorageSync("useridTag",1);
				uni.navigateTo({
					url: url,
					fail: function() {
						uni.switchTab({
							url: url
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f7fa;
	}

	.content:after {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		content: '';
		background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		z-index: -1;
	}

	.header {
		padding: 20rpx 30rpx;
		margin: 20rpx 3%;
		background-color: #4A4A4A;
		border-radius: 20rpx;
		width: 94%;
		position: relative;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		&.status {
			padding-top: calc(20rpx + var(--status-bar-height));
		}

		.userinfo {
			width: 100%;

			.info {
				.account-box {
					margin-bottom: 20rpx;
					text-align: left;
					padding: 0 10rpx;

					.account {
						color: #fff;
						font-size: 36rpx;
						font-weight: bold;
					}

					.vip-tag {
						margin-left: 12rpx;
						color: #FFD700;
						font-size: 28rpx;
					}
				}

				.user-info-grid {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 12rpx;
					width: 100%;

					.info-item {
						background-color: rgba(255,255,255,0.1);
						padding: 12rpx 20rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.label {
							color: rgba(255,255,255,0.7);
							font-size: 24rpx;
						}

						.value {
							color: #fff;
							font-size: 24rpx;
							flex: 1;
							text-align: right;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.setting {
			position: absolute;
			top: 20rpx;
			right: 20rpx;

			.cuIcon-settings {
				color: #fff;
				font-size: 36rpx;
			}
		}
	}

	.list {
		margin: 20rpx 3%;
		padding: 15rpx;
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		width: 94%;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15rpx;

		.li {
			height: 140rpx;
			padding: 15rpx;
			background-color: #fff;
			border-radius: 16rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;

			.icon {
				margin: 0 auto;
				color: #4A4A4A;
				font-size: 44rpx;
				line-height: 44rpx;
			}

			.text {
				margin-top: 12rpx;
				color: #333;
				font-size: 24rpx;
				text-align: center;
				line-height: 1.2;
			}
		}
	}

	.hover {
		transform: scale(0.95);
		opacity: 0.9;
	}
</style>
